<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小廖专属</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #eee;
            background-repeat: no-repeat;
            background-size: 100%;
        }

        .letter {
            position: relative;
            width: 600px;
            height: 400px;
            border-radius: 5px;
            background-color: pink;
            margin: 100px auto;
            overflow: hidden;
        }

        .up {
            top: 0;
            position: relative;
            width: 100%;
            height: 200px;
            background-color: rgb(255, 196, 145);
            transition: all 1s;
        }

        .down {
            bottom: 0;
            position: relative;
            width: 100%;
            height: 200px;
            background-color: rgb(255, 196, 145);
            transition: all 1s;
        }


        .up .right {
            position: absolute;
            top: 100px;
            right: -32px;
            width: 334px;
            height: 6px;
            /* border: 1px solid rgb(255, 186, 97); */
            border-radius: 3px;
            background-color: tan;
            transform: rotate(-37deg);
            box-shadow: 0 3px 4px -2px rgb(41, 41, 41);
        }

        .up .left {
            position: absolute;
            top: 100px;
            left: -32px;
            width: 334px;
            height: 6px;
            /* border: 1px solid rgb(255, 186, 97); */
            border-radius: 3px;
            background-color: tan;
            transform: rotate(37deg);
            box-shadow: 0 3px 4px -2px rgb(41, 41, 41);
        }

        .heart {
            position: absolute;
            top: 160px;
            right: 260px;
            width: 80px;
            height: 80px;
            background-color: transparent;
            transition: all 1s;
        }

        .heart .l {
            position: absolute;
            top: 10px;
            left: 4px;
            width: 50px;
            height: 80px;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            background-color: rgb(255, 104, 129);
            transform: rotate(-45deg);
            transition: all 0.6s;

        }

        .heart .r {
            position: absolute;
            top: 10px;
            right: 4px;
            width: 50px;
            height: 80px;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
            background-color: rgb(255, 104, 129);
            transform: rotate(45deg);
            transition: all 0.6s;
        }

        .heart .enter {
            position: absolute;
            top: 32px;
            left: 20px;
            background-color: transparent;
            color: thistle;
            cursor: default;
        }

        .heart:hover .r {
            background-color: rgb(255, 0, 0);

        }

        .heart:hover .l {
            background-color: rgb(252, 0, 0);
        }

        .text {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 560px;
            height: 360px;
            border-radius: 5%;
            /* overflow: hidden; */
            display: none;
            animation: setcolor 4s linear forwards;
        }

        .text p {
            font-size: 20px;
            font-family: monospace;
            background-color: transparent;
            margin: 30px 20px;
            width: 1ch;
            overflow: hidden;
            animation: typing 4s linear forwards;
        }

        @keyframes setcolor {
            from {
                background-color: transparent;
            }

            to {
                background-color: thistle;
            }
        }

        @keyframes typing {
            from {
                width: 20px;
                height: 20px;
            }

            to {
                width: 520px;
                height: 320px;
            }
        }

        .text .promise {
            position: absolute;
            top: 340px;
            left: 250px;
            width: 60px;
            height: 35px;
            border-radius: 10px;
            outline: none;
            line-height: 25px;
            text-align: center;
            display: none;
        }

        .map {
            position: relative;
            width: 100%;
            height: 100%;
            display: none;
        }

        .city {
            position: absolute;
            color: #fff;
        }


        .dotted {
            width: 4px;
            height: 4px;
            background-color: #09f;
            border-radius: 50%;
        }

        .city .pulse {
            /* 保证我们小波纹在父盒子里面水平垂直居中 放大之后就会中心向四周发散 */
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 4px;
            box-shadow: 0 0 12px #009dfd;
            border-radius: 50%;
            animation: pulse 1.2s linear infinite;
        }

        .change {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 4px;
            height: 4px;
            box-shadow: 0 0 12px rgb(255, 104, 129);
            border-radius: 50%;
            animation: pulse 1.5s linear infinite;

        }

        .city .one {
            animation-delay: 0.5s;
        }

        .city .two {
            animation-delay: 1s;
        }

        @keyframes pulse {
            0% {}

            70% {
                /* transform: scale(5);  我们不要用scale 因为他会让 阴影变大*/
                width: 20px;
                height: 20px;
                opacity: 1;
            }

            100% {
                width: 40px;
                height: 40px;
                opacity: 0;
            }
        }

        .linef {
            position: absolute;
            top: 368px;
            left: 142px;
            width: 500px;
            height: 5px;
            opacity: 0.4;
            background-color: #09f;
            transform: rotate(-21deg);

        }

        .lines {
            position: absolute;
            top: 206px;
            left: 402px;
            width: 110px;
            height: 5px;
            opacity: 0.4;
            background-color: #09f;
            transform: rotate(-16deg);
        }

        .linet {
            position: absolute;
            top: 402px;
            left: 391px;
            width: 106px;
            height: 5px;
            opacity: 0.4;
            background-color: #09f;
            transform: rotate(45deg);
        }

        .linefo {
            position: absolute;
            top: 470px;
            left: 478px;
            width: 128px;
            height: 5px;
            opacity: 0.4;
            background-color: #09f;
            transform: rotate(27deg);

        }

        .select {
            position: absolute;
            top: -300px;
            right: 100px;
            background-color: slategray;
            width: 340px;
            height: 260px;
            border-radius: 30px;
            transition: all 0.8s;
            animation: slider 0.8s linear forwards;
        }

        @keyframes slider {
            from {
                top: -300px;
            }

            to {
                top: 100px;
            }
        }

        .select p {
            width: 280px;
            margin-left: 30px;
            padding-top: 15px;
            cursor: default;
        }

        .like {
            position: absolute;
            top: 180px;
            left: 70px;
            width: 200px;
            height: 35px;
            border-radius: 10px;
            outline: none;
            line-height: 25px;
            text-align: center;
        }

        .like:hover {
            background-color: rgb(0, 255, 128);
        }

        .unlike {
            position: absolute;
            top: 220px;
            left: 120px;
            width: 100px;
            height: 35px;
            border-radius: 10px;
            outline: none;
            line-height: 25px;
            text-align: center;
        }

        .back {
            position: absolute;
            left: 900px;
            top: 280px;
            width: 25px;
            height: 60px;
            font-family: monospace;
            font-weight: 500;
            background-color: transparent;
            color: rgb(255, 255, 255);
            font-size: 25px;
            text-align: center;
            line-height: 60px;
            overflow: hidden;
            /* -webkit-box-reflect: below 1px linear-gradient(transparent, #0008); */
            display: none;
            animation: type 2.5s linear forwards;
        }

        @keyframes type {
            from {
                width: 25px;
            }

            to {
                width: 325px;
            }
        }

        .line {
            background-color: transparent;
        }

        audio {
            float: left top;
            width: 300px;
        }

        .time {
            position: absolute;
            top: 360px;
            left: 895px;
            width: 320px;
            height: 80px;
            display: none;
            overflow: hidden;

        }

        .time p {
            height: 100%;
            width: 80px;
            float: left;
            background-color: rgb(88, 88, 88);
            line-height: 80px;
            text-align: center;
            font-size: 26px;
            font-weight: 700;
            /* -webkit-box-reflect: below 1px linear-gradient(transparent, #0008); */
            color: #eee;
        }
    </style>
</head>

<body>
    <div class="time">
        <p style="border-top-left-radius: 8px;border-bottom-left-radius: 8px;"></p>
        <p></p>
        <p></p>
        <p style="border-top-right-radius: 8px;border-bottom-right-radius: 8px;"></p>
    </div>
    <audio src="music.mp3" autoplay controls loop></audio>
    <div class="back">*********</div>
    </i>
    <div class="map">
        <div class="city" style="top:50px;left:400px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:360px;left:400px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:220px;left:400px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:190px;left:510px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:320px;left:510px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:280px;left:620px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:400px;left:300px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:458px;left:156px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:500px;left:600px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="city" style="top:440px;left:480px">
            <div class="dotted"></div>
            <div class="pulse"></div>
            <div class="pulse one"></div>
            <div class="pulse two"></div>
        </div>
        <div class="line">
            <div
                style="background-color:#09f;height:304px;width:5px;position: absolute;left:400px;top:53px;opacity: 0.4;">
            </div>
            <div
                style="background-color:#09f;height:128px;width:5px;position: absolute;left:510px;top:192px;opacity: 0.4;">
            </div>
            <div class="linef"></div>
            <div class="lines"></div>
            <div class="linet"></div>
            <div class="linefo"></div>
        </div>
        <div class="select">
            <p>*****************************
            </p>
            <button class="like">***</button>
            <button class="unlike">***</button>
        </div>
    </div>
    <div class="letter">
        <div class="text">
            <p>****
            </p>
            <button class="promise">下一页</button>
        </div>
        <div class="up">
            <div class="right"></div>
            <div class="left"></div>
        </div>
        <div class="down"></div>
        <div class="heart">
            <div class=r></div>
            <div class=l></div>
            <div class="enter">enter</div>
        </div>
    </div>
    <script>
        var heart = document.querySelector(".heart");
        var up = document.querySelector(".up");
        var down = document.querySelector(".down");
        var text = document.querySelector(".text");
        var btn = document.querySelector(".promise");
        var body = document.querySelector("body");
        var letter = document.querySelector(".letter");
        var map = document.querySelector(".map");
        var select = document.querySelector(".select");
        var like = document.querySelector(".like");
        var unlike = document.querySelector(".unlike");
        var back = document.querySelector(".back");
        var dotted = document.querySelectorAll(".dotted");
        var city = document.querySelectorAll(".city");
        var line = document.querySelector(".line");
        var music = document.querySelectorAll("audio");
        var time = document.querySelector(".time");
        heart.addEventListener("click", function (e) {
            console.log("任务启动");
            up.style.top = -210 + "px";
            down.style.bottom = -200 + "px";
            heart.style.top = -60 + "px";

            setTimeout(function () {
                heart.style.display = "none";
                text.style.display = "block";
            }, 1200);
            setTimeout(function () {
                btn.style.display = "block";
            }, 5200)
        })
        btn.addEventListener("click", function (e) {
            letter.style.display = "none";
            body.style.backgroundColor = "#222";
            map.style.display = "block";
            // select.style.top = 100 + "px";
        })
        unlike.addEventListener("click", function (e) {
            alert("****");
            unlike.disabled = "disabled";
        })
        like.addEventListener("click", function (e) {
            select.style.right = -400 + "px";
            dotted.forEach(item => { item.style.backgroundColor = "rgb(255, 104, 129)"; });
            city.forEach(item => { item.children[1].className = "change"; });
            city.forEach(item => { item.children[2].className = "change one"; });
            city.forEach(item => { item.children[3].className = "change two"; });
            for (var i = 0; i < 6; i++) {
                console.log("执行");
                line.children[i].style.backgroundColor = "rgb(255, 104, 129)";
            }
            setTimeout(function () {
                select.style.display = "none";
                back.style.display = "block";
            }, 1000)
            setTimeout(function () {
                time.style.display = "block"
                countdown('2021-4-5 00:32:52');
                setInterval(function () {
                    countdown('2021-4-5 00:32:52');
                }, 1000)
            }, 3500)

        })
        function countdown(meet) {
            var nowtime = +new Date();
            var inputtime = +new Date(meet);
            var minsecond = (nowtime - inputtime) / 1000;
            var d = parseInt(minsecond / 60 / 60 / 24);
            d = (d < 10 ? "0" + d : d) + "天";
            var h = parseInt(minsecond / 60 / 60 % 24);
            h = (h < 10 ? "0" + h : h) + "时";
            var m = parseInt(minsecond / 60 % 60);
            m = (m < 10 ? "0" + m : m) + "分";
            var s = parseInt(minsecond % 60);
            s = (s < 10 ? "0" + s : s) + "秒";
            time.children[0].innerHTML = d;
            time.children[1].innerHTML = h;
            time.children[2].innerHTML = m;
            time.children[3].innerHTML = s;
        }


    </script>
</body>

</html>